<template>
  <div class="order-history">
    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input v-model="searchForm.email" placeholder="请输入用户邮箱" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button @click="resetSearch">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单表格 -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
      >
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column prop="cname" label="车辆名称" width="180"></el-table-column>
        <el-table-column prop="email" label="用户邮箱"></el-table-column>
        <el-table-column prop="rent" label="租金/天" width="120">
          <template v-slot="{ row }">
            ¥{{ row.rent }}
          </template>
        </el-table-column>
        <el-table-column prop="takeTime" label="取车时间" width="180"></el-table-column>
        <el-table-column prop="getTime" label="还车时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template v-slot="{ row }">
            <el-tag type="success">已完成</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'OrderHistory',

  data() {
    return {
      loading: false,
      searchForm: {
        email: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    // 获取历史订单列表
    async fetchData() {
      this.loading = true
      try {
        const params = {
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          email: this.searchForm.email || '',
          status: -1  // 已完成的订单
        }
        
        const res = await request.get('/HistoryOrderServlet', { params })
        
        if (res.code === 0) {
          this.tableData = res.data
          this.pagination.total = res.total
        } else {
          this.$message.error(res.msg || '获取历史订单失败')
        }
      } catch (error) {
        console.error('获取历史订单失败:', error)
        this.$message.error('获取历史订单失败')
      }
      this.loading = false
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        email: ''
      }
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },

    // 处理每页显示数量变化
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },
    
    // 处理页码变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style lang="less" scoped>
.order-history {
  .search-card {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 